<template>
  <div>
    <div class="main-box">
      <div class="main-le fl">
        <div class="home-column tab1-type">
          <!-- <span class="fr" @click="leadership()">更多 &gt;&gt;</span> -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="领导成员" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="member" v-if="this.images.length !== 0">
          <img  :src="'http://img.shanghaifoxie.com' + this.images[0].url" width="100%" alt="">
        </div>
        <div class="member" v-if="this.images.length === 0" style="line-height: 340px;text-align: center;">
          <img src="http://img.shanghaifoxie.com/uploads/allimg/150210/1-1502101056030-L.jpg" width="100%" alt="">
          <!-- 暂无数据 -->
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column">
          <span class="fr" @click="theCurrent()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="现任会长" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-for="(item, index) in this.xianrenhuizhang" @click="gotodetails(item)" v-if='index<=0' :key="item.index" class="main-ri-fs">
          <img @click="gotodetails(item)" class="fl fs-img"  :src="'http://img.shanghaifoxie.com' + item.pic" width="160" height="172" alt="">
          <p @click="gotodetails(item)">{{item.title}}</p>
          <p v-html="item.remark"></p><br>
        </div>
      </div>
    </div>
    <div class="main-box">
      <div class="main-le fl">
        <div class="home-column">
          <span class="fr" @click="successive()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="历届会长" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="leader-line">
          <dl v-for="(item, index) in lijielingdao" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
            <dt @click="gotodetails(item)">
              <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></a>
            </dt>
            <dd>
              <h3 @click="gotodetails(item)">
                <a>{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark}}
                <a @click="gotodetails(item)" class="more">[详情]</a>
              </div>
            </dd>
          </dl>
        </div>
        <div class="leader-list">
          <dl v-for="(item, index) in lijielingdao" @click="gotodetails(item)" v-if='index<=4 && index!=0' :key="item.index">
            <dt @click="gotodetails(item)">
              <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></a>
            </dt>
            <dd>
              <h3 @click="gotodetails(item)">
                <a>{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark.substr(0,30)}}
                <a @click="gotodetails(item)" class="more">[详情]</a>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column tab1-type">
          <span class="fr" @click="yearsClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane label="当代" name="first">
              <div class="his-list tab1-box show">
                <dl v-for="(item, index) in dangdai" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
                  <dt @click="gotodetails(item)">
                    <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="120" height="80" alt=""></a>
                  </dt>
                  <dd>
                    <h3>
                      <a @click="gotodetails(item)">{{item.title}}</a>
                    </h3>
                    <div class="con">{{item.remark.substr(0,50)}}
                      <a @click="gotodetails(item)" class="more">[详情]</a>
                    </div>
                  </dd>
                </dl>
                <div class="lists">
                  <ul>
                    <li v-for="(item, index) in dangdai" @click="gotodetails(item)" v-if='index<=6  && index!=0' :key="item.index">
                      <a @click="gotodetails(item)">{{item.title}}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="近代" name="first1">
              <div class="his-list tab1-box hide">
                <dl v-for="(item, index) in jingdai" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
                  <dt @click="gotodetails(item)">
                    <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="120" height="80" alt=""></a>
                  </dt>
                  <dd>
                    <h3>
                      <a @click="gotodetails(item)">{{item.title}}</a>
                    </h3>
                    <div class="con">{{item.remark.substr(0,50)}}
                      <a @click="gotodetails(item)" class="more">[详情]</a>
                    </div>
                  </dd>
                </dl>
                <div class="lists">
                  <ul>
                    <li v-for="(item, index) in jingdai" @click="gotodetails(item)" v-if='index<=6  && index!=0' :key="item.index">
                      <a @click="gotodetails(item)">{{item.title}}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="古代" name="first2">
              <div class="his-list tab1-box hide">
                <dl v-for="(item, index) in gudai" @click="gotodetails(item)" v-if='index<=0' :key="item.index">
                  <dt @click="gotodetails(item)">
                    <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="120" height="80" alt=""></a>
                  </dt>
                  <dd>
                    <h3 @click="gotodetails(item)">
                      <a>{{item.title}}</a>
                    </h3>
                    <div class="con">{{item.remark.substr(0,50)}}
                      <a class="more">[详情]</a>
                    </div>
                  </dd>
                </dl>
                <div class="lists">
                  <ul>
                    <li v-for="(item, index) in gudai" @click="gotodetails(item)" v-if='index<=6  && index!=0' :key="item.index">
                      <a @click="gotodetails(item)">{{item.title}}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      activeName2: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        indexType: '2'
      },
      lingdaochengyuan: [],
      xianrenhuizhang: [],
      lijielingdao: [],
      dangdai: [],
      jingdai: [],
      gudai: [],
      images: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '2';
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let dataArr = response.data.data.list;
            let imgs = response.data.data.image;
            this.images = imgs;
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].type === 0) {
                // 领导成员
                this.lingdaochengyuan = dataArr[i].data;
              }
              if (dataArr[i].type === 19) {
                // 现任会长
                this.xianrenhuizhang = dataArr[i].data;
              }
              if (dataArr[i].type === 20) {
                // 历届会长
                this.lijielingdao = dataArr[i].data;
              }
              if (dataArr[i].type === 11) {
                // 当代
                this.dangdai = dataArr[i].data;
              }
              if (dataArr[i].type === 12) {
                // 近代
                this.jingdai = dataArr[i].data;
              }
              if (dataArr[i].type === 13) {
                // 古代
                this.gudai = dataArr[i].data;
              }
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    handleClick(tab) {
    },
    // 领导成员
    leadership() {
      let type = 0;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 现任会长
    theCurrent() {
      let type = 19;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 历届会长
    successive() {
      let type = 20;
      this.$router.push({ path: `/pageList/${type}` });
    },
    // 年代
    yearsClick() {
      if (this.activeName2 === 'first') {
        this.$router.push({ path: `/pageList/${'11'}` });
      }
      if (this.activeName2 === 'first1') {
        this.$router.push({ path: `/pageList/${'12'}` });
      }
      if (this.activeName2 === 'first2') {
        this.$router.push({ path: `/pageList/${'13'}` });
      }
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    }
  },
  components: {}
};
</script> 

<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .member {
    height: 340px;
    border: solid 1px #d8d8d8;
    margin-top: 20px;
    padding: 20px 10px;
  }
  .main-le {
    width: 600px;
    //*********************************//
    .leader-line {
      padding-top: 15px;
      height: 106px;
      padding-bottom: 20px;
      dt {
        width: 140px;
        height: 106px;
        float: left;
      }
      dd {
        float: left;
        width: 448px;
        padding-left: 12px;
        h3 {
          font-size: 18px;
          font-weight: normal;
          height: 30px;
          line-height: 30px;
          color: #000;
        }
        .con {
          line-height: 18px;
          height: 72px;
        }
      }
    }
    .leader-list {
      height: auto;
      overflow: hidden;
      dl {
        width: 140px;
        float: left;
        padding-right: 13px;
        &:last-child {
          padding-right: 0;
        }
      }
      dd {
        h3 {
          font-size: 18px;
          font-weight: normal;
          height: 40px;
          line-height: 40px;
          color: #000;
        }
        .con {
          line-height: 18px;
          height: 54px;
          overflow: hidden;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .main-ri-fs {
      height: 345px;
      padding-top: 20px;
      overflow: hidden;
      line-height: 18px;
      .fs-img {
        margin: 0 12px 8px 0;
      }
    }
    //***************************************//
    .his-list {
      dl {
        height: 80px;
        display: block;
        margin-top: 20px;
        dt {
          width: 120px;
          height: 80px;
          float: left;
        }
        dd {
          width: 248px;
          padding-left: 12px;
          float: left;
          h3 {
            font-size: 18px;
            font-weight: normal;
            line-height: 24px;
          }
          .con {
            line-height: 18px;
            height: 54px;
            overflow: hidden;
            padding-top: 6px;
          }
        }
      }
      .lists {
        padding-top: 8px;
        li {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          position: relative;
          padding-left: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          &::before {
            position: absolute;
            left: 0;
            top: 18px;
            content: '';
            width: 4px;
            height: 4px;
            background-color: #dd9b1e;
          }
        }
      }
    }
  }
}
</style>